<template>
	<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" width="750px" append-to-body @close="close">
		<!--  html  -->
		<div v-loading="loading" class="box-container">
			<div class="left">
				<div class="title">所有商户信息</div>
				<el-input v-model="filterText" size="small" placeholder="输入关键字进行过滤" />
				<el-tree
					ref="originTree"
					:data="originTree"
					:props="treeProps"
					:expand-on-click-node="false"
					:filter-node-method="filterNode"
					:highlight-current="true"
					class="el-tree-box"
					:class="{ is_checkbox: verifyMerchant == 3 }"
					show-checkbox
					node-key="id"
					@check="originChange"
				/>
			</div>
			<div class="right">
				<div class="title">已选择商户信息</div>
				<el-input v-model="filterText" size="small" placeholder="输入关键字进行过滤" />
				<el-tree
					ref="checkedTree"
					:data="checkedTree"
					:props="treeProps"
					:expand-on-click-node="false"
					:filter-node-method="filterNode"
					:highlight-current="true"
					default-expand-all
					class="el-tree-box"
					:show-checkbox="false"
					node-key="id"
					@check="checkChange"
				>
					<span slot-scope="{ node }" class="custom-tree-node">
						<span>{{ node.label }}</span>
					</span>
				</el-tree>
			</div>
		</div>

		<div slot="footer" class="dialog-footer">
			<el-button size="small" round @click="hide">取 消</el-button>
			<el-button size="small" :disabled="checkedTree.length<=0" round type="primary" @click="handleSubmit()">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			// 配置
			title: '选择商户',
			resolve: null,
			reject: null,
			treeProps: {
				children: 'shops',
				label: 'name'
			},
			// 状态
			loading: false,
			dialogVisible: false,
			// 数据
			filterText: null,
			checkedIds: [],
			checkedTree: [],
			originTree: [],
			//商户类型
			verifyMerchant: ''
		};
	},
	computed: {},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	beforeCreate() {},
	created() {},
	beforeMount() {},
	mounted() {},
	beforeUpdate() {},
	update() {},
	activated() {},
	deactivated() {},
	beforeDestroy() {},
	destroyed() {},
	methods: {
		// 弹框相关
		open({ treeData, checkedIds, verifyMerchant }) {
			if (verifyMerchant === 3) {
				// 默认选中本商户
				treeData[0].disabled = true;
				let mapIds = treeData[0].shops?.map(v => v.id);
				checkedIds.push(...mapIds);
				// 去重
				let newSet_checkedIds = new Set(checkedIds);
				let arr = [];
				arr.push(...newSet_checkedIds);
				checkedIds = arr;
			}
			this.originTree = treeData;
			this.verifyMerchant = verifyMerchant;
			this.show();
			this.$nextTick(() => {
				this.$refs.originTree.setCheckedKeys(checkedIds);
				this.originChange();
			});
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		show() {
			this.dialogVisible = true;
		},

		hide() {
			this.resolve = null;
			this.reject = null;
			this.dialogVisible = false;
		},

		close() {
			this.loading = false;
		},

		/**
		 * 数据组
		 */

		/**
		 * 按钮组
		 */
		// 提交
		handleSubmit() {
			this.checkedTree.forEach(mchItem => {
				mchItem.merchant = mchItem.id;
				mchItem.merchantName = mchItem.name;
				delete mchItem.id;
				delete mchItem.name;
				const shop = [];
				mchItem.shops.forEach(shopItem => {
					shop.push(shopItem.id);
				});
				mchItem.shop = shop;
			});
			this.resolve(this.checkedTree);
			this.hide();
		},

		// 点击tree

		/**
		 * 状态组
		 */
		// 选择改变
		originChange(e) {
			const checkedIds = this.$refs.originTree.getCheckedKeys();
			const halfCheckedIds = this.$refs.originTree.getHalfCheckedKeys();
			const allCheckedIds = checkedIds.concat(halfCheckedIds);
			const tree = JSON.parse(JSON.stringify(this.originTree));
			const list = [];
			tree.forEach(mch => {
				if (allCheckedIds.includes(mch.id)) {
					if (mch[this.treeProps.children]) {
						for (let i = mch[this.treeProps.children].length - 1; i >= 0; i--) {
							if (!allCheckedIds.includes(mch[this.treeProps.children][i].id)) {
								mch[this.treeProps.children].splice(i, 1);
							}
						}
					}
					list.push(mch);
				}
			});
			this.checkedTree = list;
			this.$nextTick(() => {
				this.$refs.checkedTree.setCheckedKeys(checkedIds);
			});
		},

		checkChange(e) {
			const checkedIds = this.$refs.checkedTree.getCheckedKeys(true);
			this.$refs.originTree.setCheckedKeys(checkedIds);
			this.originChange();
		},

		/**
		 * 方法组
		 */
		// 筛选tree
		filterNode(value, data) {
			if (!value) return true;
			return data[this.treeProps.label].indexOf(value) !== -1;
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-tree-box {
	overflow: auto;
	max-height: 500px;
	margin-top: 10px;
}
/deep/.box-container {
	display: flex;

	.left,
	.right {
		flex: 1;
	}

	.left {
		margin-right: 20px;
	}

	.title {
		margin-bottom: 10px;
		color: #333;
		text-align: center;
	}

	.is_checkbox {
		.el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content .el-checkbox {
			display: none;
		}
	}
}
</style>
